<template>
  <div>
    <h2>App.vue + {{counter}}</h2>
    <button @click="increment()">+1</button>
    <button @click="decrement()">-1</button>
    <button @click="increment_1999(1999)">2s后 + 1999</button>

    <p>-------------</p>
    <!--<h2>{{$store.getters.more20stu}}</h2>-->
    <!--<h2>{{$store.getters.more20stuLength}}</h2>-->
    <!--<h2>{{$store.getters.moreAgeStu(24)}}</h2>-->

    <h2>{{more20stu}}</h2>
    <h2>{{more20stuLength}}</h2>
    <h2>{{moreAgeStu(24)}}</h2>
  </div>
</template>


<script>

import {useStore} from "vuex"
// 引入计算属性
import {computed} from "vue";
import {mapGetters} from 'vuex'
export default  {
    computed: {
      ...mapGetters(['more20stu','more20stuLength','moreAgeStu'])
    },
    setup(){
      // 拿到store对象
      const store = useStore()


      return {
        counter: computed(()=> store.state.counter),
        increment: () => store.dispatch('increment'),
        decrement: () => store.dispatch('decrement'),
        increment_1999: (num) => store.dispatch('increment_1999',num)
      }
    }
  }
</script>


<style scoped>

</style>
